<template>
	<view style="background-color: #FFFFFF;">
		<view class="shadow" @click.stop="heidScore()" v-if="isScore"></view>
		<view class="status_bar"></view>
		<view class="top" :style="{background: 'url('+storeData.store_mb_banner_path+')'}">
			<view class="search flex_center">
				<image @click="back()" class="back" :src="`${picUrl}/store/item12.png`" mode=""></image>
				<view style="position: relative;">
					<input @confirm="toStoreLis(searchValue,storeData.store_id)" class="input" v-model="searchValue" placeholder="请输入关键词" type="text" value="" />
					<image @click="toStoreLis(searchValue,storeData.store_id)" class="search_icon" src="../../static/images/search_01.png" mode=""></image>
				</view>
			</view>
			<view class="flex_center_between">
				<view class="flex_center">
					<image class="store_header" :src="storeData.store_label||'/static/images/userImg111.png'" @click="store_header"></image>
					<view class="store_name">{{storeData.store_name}}</view>
					<view class="IcoBox" @click.stop="showScore()">
						<image class="xxx" :src="`${picUrl}/store/item08.png`" mode=""></image>
								<view class="scoreBox" v-if="isScore">
									<view style="color: #000000;font-weight: bold;">店铺评分</view>
									<view v-for="(value,_index) in storeData.store_credit"  :key="_index">{{value.text}}:{{value.credit}}</view>
								</view>	
					</view>
				</view>
				<view class="flex_center">
					<!-- isStoreFavorites -->
					<image @click="changeLike(storeData.isStoreFavorites)" v-if="storeData.isStoreFavorites == 0" class="shoucang" :src="`${picUrl}/store/item02.png`" mode=""></image>
					<image @click="changeLike(storeData.isStoreFavorites)" v-if="storeData.isStoreFavorites == 1" class="shoucang" src="../../static/images/download2.png" mode=""></image>
					
					
					<view style="color: #FFFFFF;">{{storeData.favorites_count}}收藏</view>
				</view>
			</view>
		</view>
		
		
		
		
		
		<view style="display: none;" class="flex_center mar_">
			<view style="width: 20rpx;height: 50%;"></view>
			<view style="display: flex;flex-wrap: wrap;" class="kind_box">
				<view @click="toSort(item.stc_id,item.stc_name)" class="warp_item" v-for="(item,index) in sortData" :key="index">
					<image :src="item.stc_image" mode=""></image>
					<view style="text-align: center;"> {{item.stc_name}}</view>
				</view>
			</view>
			<view style="width: 20rpx;height: 50%;"></view>
		</view>
		
		
		<view class="NabBox flex0-end" style="margin-top: 20upx;" >
			<view class="NavList" @click="Navbtn(index)" :class="{active1:index==num2}" v-for="(item,index) in NavList" :key="index">
				{{item}}
			</view>
		</view>
		
		
		
		
		<view class="" v-if="Banner.length>0" style="margin: 20rpx;border-radius: 20rpx;overflow: hidden;">
			<swiper class="swiper1" :circular="true" :indicator-dots="true" autoplay="true" interval="2000" duration="500"	>
				<swiper-item v-for="(item,index) in Banner" :key="index">
					<navigator :url="item.url" v-if="item.url"><image  style="width: 100%;height: 300upx;" :src="item.image_path" mode="aspectFill"></image></navigator>
					<image v-else style="width: 100%;height: 300upx;" :src="item.image_path" mode="aspectFill"></image>
				</swiper-item>		
			</swiper>	
		</view>
		
		<view v-if="storeData.store_mb_ad1" class="flex_center_between" style="margin: 0 20rpx;">
			<view class="">
				<navigator :url="storeData.store_mb_ad1_url">
					<view class="" style="width:340rpx;height: 500rpx;overflow: hidden;border-radius: 20rpx;"><image style="width: 100%;" :src="storeData.store_mb_ad1" mode="widthFix"></image></view>
				</navigator>
			</view>
			<view class="">
				<navigator :url="storeData.store_mb_ad2_url">
					<view style="width:350rpx;height: 245rpx;overflow: hidden;border-radius: 20rpx;"><image style="width: 100%;" :src="storeData.store_mb_ad2" mode="widthFix"></image></view>
				</navigator>
				<navigator :url="storeData.store_mb_ad3_url">
					<view style="width:340rpx;height: 245rpx;overflow: hidden;border-radius: 20rpx;margin-top: 10rpx;"><image style="width: 100%;" :src="storeData.store_mb_ad3" mode="widthFix"></image></view>
				</navigator>
			</view>
		</view>
		
		<view v-if="storeData.store_mb_ad4" style="margin: 20rpx;border-radius: 20rpx;height: 120rpx;overflow: hidden;">
			<navigator :url="storeData.store_mb_ad4_url">
				<image style="width: 100%;" :src="storeData.store_mb_ad4" mode="widthFix"></image>
			</navigator>
		</view>
		
		
		<view v-if="num2==0">
			<scroll-view scroll-x="true">
				<view class="scrorw">
					<view class="title" @click="change('all','all')" :class="{title_check:type=='all'}">
						全部
					</view>
					<view class="title" @click="change(index,item.gc_id)" :class="{title_check:index==type}" v-for="(item,index) in navs" :key="index">
						{{item.gc_name}}
					</view>
				</view>				
			</scroll-view> 
		</view>
		<!-- 商品 -->
		<view v-if="goodList" style="padding-bottom: 200upx;" class="flex_center_between flex_warp shop_box">
			<view @click="toDetail(item.goods_id)" class="box_width boxLi" v-for="(item,index) in goodList" :key="index">
				<image :src="item.goods_image_url" mode=""></image>
				<view style="min-height: 92upx;" class="goods_title">{{item.goods_name}}</view>
				<view class="price"><text class="rmb">¥</text>{{item.goods_price}}</view>
				<view class="decoration">¥{{item.goods_marketprice}}</view>
			</view>
		</view>
		<view v-if="goodList.length<=0">
			<image style="width: 100%;" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
		</view>
	
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default{
		components:{uniNavBar},
		data(){
			return{
				NavList:["全部","推荐","新品","热销"],
				navs:[],
				searchValue:"",
				gc_id:0,
				sortData:[],
				curpage:1,
				hasmore:false,
				storeData:{},
				dataList:[],
				type:"all",
				goodList:[],
				listId:0,
				store_id:0,
				isScore:false,
				types:"",
				Banner:[],
				num2:0,
				curpage2:1,
				commend:"",
				iskey:"",
			}
		},
		onLoad(e) {
			if(e.type){
				this.types=e.type;
			}
			setTimeout(()=>{
				this.$util.request({
					url:'/mobile/index.php?act=store&op=flowstat_record',
					method:'post',
					data:{
						goods_id:e.store_id
					}
				}).then(res=>{
					
				})
			},100)
			this.store_id=e.store_id
			this.getStoreInfo()
		},
		methods:{	
			Navbtn(index){
				this.num2=index;
				this.curpage=1
				if(index==0){//推荐
					this.commend=1
					this.iskey=""
				}else if(index==1){//新品
					this.commend=""
					this.iskey=4
				}else if(index==2){//热销
					this.commend=""
					this.iskey=1
				}
				// else if(index==3){//人气
				// 	this.commend=""
				// 	this.iskey=2
				// }
				this.GetNavGoods();
			},
			showScore(){
				this.isScore=true
			},
			heidScore(){
				this.isScore=false
			},
			toSort(PPID,name){
				uni.navigateTo({
					url:"/mall/store/storeProductsLists?PPID="+PPID+"&store_id="+this.store_id+"&name="+name
				})
			},
			toStoreLis(value,id){
				uni.navigateTo({
					url:"/mall/store/storeProductsLists?index="+this.searchValue+"&store_id="+this.store_id
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			toDetail(id){
				uni.navigateTo({
					url:"/mall/goods/info?goods_id="+id
				})
			},
			changeLike(id){
				 if(id == 0){
					 this.$util.request({
					 	url:'/mobile/index.php?act=member_favorites&op=favorites_add',
					 	method: 'post',
					 	data: {
					 		"fav_type":"store",
							"fav_id":this.store_id
					 	},
					 }).then(res=>{			
					 		this.getStoreInfo()
					 })
				 }
				 if(id == 1){
				 	this.$util.request({
				 		url:'/mobile/index.php?act=member_favorites&op=favorites_del',
				 		method: 'post',
				 		data: {				 			
				 			"fav_id":this.store_id
				 		},
				 	}).then(res=>{			
				 			this.getStoreInfo()
				 	})				 
				 }
				 
				 
			},
			store_header(){
				uni.navigateTo({
					url:"/mall/store/storeInfo?store_id="+this.store_id
				})
			},
			getStoreInfo(){//店铺详情
				this.$util.request({
					url:'/mobile/index.php?act=store&op=show',
					method: 'get',
					data: {
						"store_id":this.store_id,
					},
				}).then(res=>{			
						this.storeData=res.datas	
						if(res.datas.ad_swiper.length>=0){
							this.Banner=res.datas.ad_swiper
						}
				})
				//店铺分类
				this.$util.request({
					url:'/mobile/index.php?act=store&op=get_top_goods_class',
					method: 'get',
					data: {
						"store_id":this.store_id,
						store_channel_type:this.types,
					},
				}).then(res=>{	
					this.navs=res.datas
					// this.gc_id=res.datas[0].gc_id
					this.GetList();
				})
			},
			GetNavGoods(state){//一级导航数据获取
				var that=this
				this.$util.request({
					url: '/mobile/index.php?act=goods&op=goods_list',
					method: 'get',
					data: {
						"store_id":this.store_id,
						"commend":this.commend,
						key:this.iskey,
						curpage:this.curpage2,
					},
				}).then(function(res) {
					if(state){
						that.goodList= that.goodList.concat(res.datas.goods_list)  
					}else{
						that.goodList=res.datas.goods_list
					}
					if(res.datas.paged.hasmore){
						that.curpage2++;
					}else{
						that.curpage2=false;
					}
					
				})
			},
			GetList(state){//二级导航数据获取
				let that=this
				this.$util.request({
					url:'/mobile/index.php?act=store&op=get_bind_class_goods',
					method: 'get',
					data: {
						"store_id":this.store_id,
						"gc_id":this.gc_id,
						"curpage":this.curpage
					},
				}).then(res=>{	
						if(state){
							that.goodList= that.goodList.concat(res.datas.goods_list)  
						}else{
							that.goodList=res.datas.goods_list
						}
						if(res.datas.length == 0){
							this.hasmore=false
						}else{
							this.hasmore=res.datas.page.hasmore
						}
				})
			},
			change(index,id){//全部导航
				this.curpage=1
				this.type=index
				if(id=="all"){
					this.gc_id="";
				}else{
					this.gc_id=id;
				}
				this.GetList();
			},
			
		},
		onReachBottom() {
			if(this.num2==0){
				if(this.hasmore){
					this.curpage++;
					this.GetList(true);
				}else{
					uni.showToast({
						title:'已是最后一页！',
						icon:'none'
					})
				}
			}else{
				if(this.curpage2){
					this.GetNavGoods(true);
				}else{
					uni.showToast({
						title:'已是最后一页！',
						icon:'none'
					})
				}
			}
			
		},
	}
</script>

<style>
	.NabBox{
		
	}
	.active1{
		background-color: #ff4300;
		color: #FFFFFF !important;
	}
	.NavList{
		font-size: 32rpx;
		line-height: 60rpx;
		font-weight: bold;
		color: #000000;
		width: 25%;
		text-align: center;
	}
	
	.shadow{
		width:100%;
		height: 100vh;
		background-color:transparent;
		position: fixed;
		top: 0;
		left: 0;
	}
	.IcoBox .scoreBox{
		background-color: #FFFFFF;
		position: absolute;
		left: 50rpx;
		top: -20rpx;
		padding: 20rpx;
		width: 200rpx;
		box-sizing: border-box;
		z-index: 100;
	}
	.IcoBox{
		position: relative;
	}
	.search_icon{
		height: 30rpx;width: 30rpx;position: absolute;
		right: 20rpx;top: 20rpx;z-index: 20;
	}
	.input{
		border: 1px solid #F0F0F0;margin-left: 40rpx;background-color: #DCDCDE;
		padding:10rpx 50rpx;
		border-radius: 60rpx;
	}
	.back{
		height: 35rpx;width: 20rpx;
	}
	.store_header{
		height: 80rpx;width: 80rpx;
	}
	.store_name{
		margin:0 20rpx;font-size: 30rpx;color: #FFFFFF;
	}
	.xxx{
		height: 30rpx;width: 30rpx;
	}
	.shoucang{
		height: 26rpx;width: 30rpx;margin-right: 10rpx;
	}
	.mar_{
		margin-top: -200rpx;
	}
	.kind_box{
		background-color: #FFFEFF;border-radius: 20rpx;
		width: 715upx;
	}
	.warp_item image{
		text-align: center;
		height: 100rpx;width: 100rpx;border-radius: 50%;
	}
	.scrorw{
		width: 100%;
		overflow-x: scroll;
		white-space: nowrap;
		display: flex;
		padding: 0 20upx;
		height: 75rpx;
		/* width: 100%;display: flex;flex-wrap: nowrap; */
	}
	.color{
		color: #F95190;
	}
	.bootom_box{
		width: 25%;text-align: center;
		display: flex;justify-content: center;align-items: center;
	}
	.bootom_box image{
		height: 28rpx;width: 28rpx;
		margin-right: 12rpx;
	}
	.bootom{
		background-color: #FFFFFF;height:100rpx;
		width: 100%;position: fixed;bottom: 0;
		box-shadow: 0 -2rpx 6rpx -1rpx #EEEEEE;
	}
	.price{
		font-size: 32rpx;color:#FF0000;font-weight: bold;
	}
	.rmb{
		font-size: 24rpx;margin-right: 6rpx;
	}
	.decoration{
		margin-top: -10rpx;
		text-decoration: line-through;
		font-size: 24rpx;
		color: #999999;
	}
	.goods_title{
		overflow: hidden;
		display: -webkit-box; 
		-webkit-line-clamp: 2; 
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}
	.box_width{
		width: 49%;
	}
	.box_width image{
		width: 100%;
		height: 300rpx;
	}
	.shop_box{
		background-color: #FFFFFF;padding: 20rpx;
	}
	.title_check{
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
		border-bottom:4rpx solid #D70E5D;
	}
	.title{
		font-size: 30rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
		line-height: 50rpx;
		height: 50rpx;
	}
	.warp_item{
		padding: 32rpx;
	}
	.flex_warp{
		display: flex;flex-wrap: wrap;justify-content: center;
	}
	.flex_center_between{
		display: flex;align-items: center;justify-content: space-between;
	}
	.flex_center{
		display: flex;align-items: center;
	}
	.status_bar {
	      height: var(--status-bar-height);
	      width: 100%;
	  }
	.top{
		padding: 20rpx;
		height:240rpx;
		
		background-size:100% 100% !important;
	}
	.search{
		margin-bottom: 40rpx;
	}
	uni-page-body {
		
	}
	.boxLi{
		border: 1upx solid #f4f4f4;
		margin-top: 20upx;
		border-radius: 10upx;
		overflow: hidden;
	}
</style>
